<template>
  <div class="bigbox">
    <div :class="['big-play',{'show':mainPlay}]">
      <div class="bg" :style="'background-image: url('+prop.picUrl+')'"></div>
      <div class="playbox">
        <div class="header">
          <i class="iconfont icon-xiangxia left" @click.stop="hideMainPlay"></i>
          <div class="center">
            <h4>{{prop.name}}</h4>
            <div class="content" v-if="prop">
              <p>{{prop.singername}}</p>
              <div>
                <i class="iconfont icon-jia"></i>
              </div>
            </div>
          </div>
          <i class="iconfont icon-fenxiang right"></i>
        </div>
        <div :class="['lyric',{'hide':lyricOrCd}]" @click.stop="hideLyric">
          <div class="topshadow"></div>
          <ul class="lyricbox" :style="{'margin-top':heighlightPosition}">
            <li v-for="(ele,index) in lyric" :key="index" :class="{'highlight':heighLight==index }">{{ele.text}}</li>
          </ul>
          <div class="bottomshadow"></div>
        </div>
        <div :class="['bigCd',{'hide':!lyricOrCd}]" @click.stop="showLyric">
          <div :class="['cdbox','play',{'pause':iconplay}]">
            <div class="cdbg">
              <img src="../assets/imgs/cd1.png" alt />
              <div class="imgbox">
                <img :src="prop.picUrl" alt />
              </div>
            </div>
          </div>
        </div>
        <div :class="['interactive',{'hide':!lyricOrCd}]">
          <div class="eleiconbox" @click.stop="changeLike" ref="iLike">
            <i :class="['iconfont',like?'icon-aixin1':'icon-aixin']"></i>
          </div>
          <div class="eleiconbox">
            <i class="iconfont icon-xiazai">
              <div class="vip">
                <i class="iconfont icon--Vip"></i>
              </div>
            </i>
          </div>
          <div class="eleiconbox" @click.stop="entercommentlist">
            <div class="comment">{{commentsum|commentshow}}</div>
            <div class="first">
              <i class="iconfont icon-pinglun"></i>
            </div>
            <div class="second">
              <i class="iconfont icon-pinglun"></i>
            </div>
          </div>
          <div class="eleiconbox">
            <i class="iconfont icon-gengduo"></i>
          </div>
        </div>
        <div class="slide">
          <div class="current-time">{{current|musicEndTime}}</div>
          <van-slider @change="sliderchange" v-model="value" active-color="rgba(255, 255, 255, 0.8)" inactive-color="rgba(255, 255, 255, 0.3)">
            <template #button>
              <div class="custom-button"></div>
            </template>
          </van-slider>
          <div class="end-time">{{ duration | musicEndTime }}</div>
        </div>
        <div class="controlbox">
          <div class="eleiconbox" @click.stop="changePlayMode">
            <div class="one" v-show="playmode">1</div>
            <i class="iconfont icon-xunhuan"></i>
          </div>
          <div class="eleiconbox" @click.stop="pre">
            <i class="iconfont icon-shangyishou"></i>
          </div>
          <div class="eleiconbox" @click.stop="changePlayState">
            <i :class="['iconfont',iconplay?'icon-bofang':'icon-24gf-pause2']"></i>
          </div>
          <div class="eleiconbox" @click.stop="next">
            <i class="iconfont icon-xiayishou"></i>
          </div>
          <div class="eleiconbox" @click.stop="showsongslist">
            <i class="iconfont icon-24gf-playlist"></i>
          </div>
        </div>
      </div>
    </div>
    <footer :class="{'pl-show':plshow,'search-show':seshow}">
      <audio ref="audio" :src="musicSrc" @play="play" @pause="pause" @loadeddata="loadeddataFun"></audio>
      <div class="play">
        <div :class="['cd','play',{'pause':iconplay}]" @click.stop="showMainPlay">
          <div class="imgbox">
            <img :src="prop.picUrl" alt />
          </div>
        </div>
        <div class="songsDetail" @click.stop="showMainPlay">
          <span class="song-name">{{prop.name}}</span> -
          <span class="singer" v-if="prop">{{prop.singername}}</span>
        </div>
        <div class="control" @click.stop="changePlayState">
          <div class="left-control">
            <div class="left" ref="lBar">
              <div class="leftarc"></div>
            </div>
          </div>
          <div class="right-control">
            <div class="right" ref="rBar">
              <div class="rightarc"></div>
            </div>
          </div>
          <i class="iconfont icon-24gf-pause2" v-show="!iconplay"></i>
          <i class="iconfont icon-bofang" v-show="iconplay"></i>
        </div>
        <div class="play-lists" @click.stop="showsongslist">
          <i class="iconfont icon-24gf-playlist"></i>
        </div>
      </div>
      <div class="footerList">
        <router-link tag="div" v-for="(ele,index) in footerList" :key="index" @click="footerChangeCon(index)" :to="ele.to" exact-active-class="con">
          <div class="bg">
            <i :class="['iconfont',ele.icon]"></i>
          </div>
          <p>{{ele.name}}</p>
        </router-link>
      </div>
    </footer>
    <music-list
      :prop="songsList"
      :mode="playmode"
      :currentsong="currentsongindex"
      :show="songlistsshow"
      @changeplayson="changePlayMusic"
      @hidesongslistson="hidesongslist"
    ></music-list>
    <comment-page :sum="commentsum" :musiccomment="prop" :show="entercomment" @hidecommentlistson="hidecommentlist"></comment-page>
  </div>
</template>

<script>
import commentPage from "./comment.vue";
import musicList from "./musicList.vue";
import { getSongUrl } from "../assets/api/found.js";
import { getLyric } from "../assets/api/found.js";
import { getSongComment } from "../assets/api/comment.js";
import { addMyLike } from "../assets/api/personal.js";
import { Toast } from "vant";
export default {
  props: [
    "prop",
    "mainPlay",
    "songsList",
    "currentsongindex",
    "plshow",
    "seshow",
    "mylikelist",
  ],
  data() {
    return {
      entercomment: false, //进入评论页
      commentsum: 0, //评论总数
      songlistsshow: false, //播放列表是否展现
      like: false, //是否为我喜欢歌曲
      playmode: true, //false循环 true单曲
      heighHalf: 0, //歌词高度基准
      heighlightPosition: "33vh", //高亮时歌词中心显示
      heighLight: 0, //高亮位置
      lyricOrCd: true, //显示歌词还是CD
      lyric: [], //歌词
      firstflag: false, //首次进入页面不播放
      playInterval: null, //播放定时器
      current: 0, //当前播放时间
      value: 0, //进度条长度
      musicSrc: "",
      settimeleft: null, //定时器，用来设置歌曲过半之后左半圆动画开始
      duration: 280, //音乐总时长
      iconplay: true, //播放控制 true为暂停 false为播放
      footerConIndex: 0,
      footerList: [
        {
          icon: "icon-wangyiyunyinlezizhi-copy",
          name: "发现",
          to: "/main",
        },
        {
          icon: "icon-boke",
          name: "播客",
          to: "/",
        },
        {
          icon: "icon-yinleyinpin",
          name: "我的",
          to: "personal",
        },
        {
          icon: "icon-renmen",
          name: "关注",
          to: "/focus",
        },
        {
          icon: "icon-diandongji",
          name: "云村",
          to: "/video",
        },
      ],
    };
  },
  methods: {
    //隐藏评论
    hidecommentlist() {
      this.entercomment = false;
      this.$emit("move");
    },
    //显示评论
    entercommentlist() {
      this.entercomment = true;
      this.$emit("ban");
    },
    //隐藏播放列表
    hidesongslist() {
      this.songlistsshow = false;
      this.$emit("move");
    },
    //显示播放列表
    showsongslist() {
      this.$emit("ban");
      this.songlistsshow = true;
    },
    //点击播放列表中歌曲
    changePlayMusic(index) {
      this.$emit("change-play-musicson", index);
    },
    //切换我喜欢
    changeLike() {
      this.like = !this.like;
      if (this.like == true) {
        this.$refs.iLike.style.animation = "like 0.2s ease-in-out";
        Toast("已添加到我喜欢的音乐");
      } else {
        this.$refs.iLike.style.animation = null;
        Toast("已取消喜欢");
      }
    },
    //隐藏歌词
    hideLyric() {
      this.lyricOrCd = true;
    },
    //显示歌词
    showLyric() {
      this.lyricOrCd = false;
    },
    //改变底边图标高亮
    footerChangeCon(index) {
      this.footerConIndex = index;
    },
    //播放事件
    play() {
      this.iconplay = false; //播放控制
      //将获取的audio存储起来，不用每次调用都访问
      let audio = this.$refs.audio;
      this.duration = audio.duration;
      //如果播放的时间少于一半
      if (this.value < 50) {
        //当没有给新的动画时才设置初始动画
        if (document.styleSheets[0].cssRules[0].name != "new") {
          this.$refs.rBar.style.animation = `progressBar ${
            this.duration / 2
          }s linear forwards`;
        }
      }
      // 实时控制进度条
      this.playInterval = setInterval(() => {
        this.current = audio.currentTime; //实时变化时间
        this.duration = audio.duration; //总时间
        // 计算滚动条值
        this.value = (this.current / this.duration) * 100;
      }, 999);

      //当当前播放时间小于总时间的一半
      if (this.value < 50) {
        //让右半圆动画继续
        this.$refs.rBar.style.animationPlayState = "running";
        //更新定时器时间
        this.settimeleft = setTimeout(() => {
          //设置左半圆动画
          this.$refs.lBar.style.animation = `progressBar ${
            this.duration / 2
          }s linear forwards`;
        }, (this.duration / 2 - audio.currentTime) * 1000);
      } else {
        //播放时间大于总时间一半时让右半圆动画继续
        this.$refs.lBar.style.animationPlayState = "running";
      }
    },
    //暂停事件与播放结束
    pause() {
      clearInterval(this.playInterval);
      //将获取的audio存储起来，不用每次调用都访问
      let audio = this.$refs.audio;
      //播放时间小于总时间一半时
      if (audio.currentTime < audio.duration / 2) {
        //右半圆动画暂停
        this.$refs.rBar.style.animationPlayState = "paused";
        //清除定时器
        clearTimeout(this.settimeleft);
      } else {
        // 播放时间大于总时间一半左半圆动画暂停
        this.$refs.lBar.style.animationPlayState = "paused";
      }

      if (audio.currentTime == this.duration) {
        this.reset();
        if (this.playmode == 1) {
          this.restart();
        } else {
          this.next();
        }
      }
    },
    //下一首
    next() {
      this.$emit("playnextson", "next");
    },
    //上一首
    pre() {
      this.$emit("playnextson", "pre");
    },
    //重置
    reset() {
      // 把新加的动画删除
      if (document.styleSheets[0].cssRules[0].name == "new") {
        document.styleSheets[0].deleteRule(0);
      }
      this.iconplay = true;
      this.$refs.rBar.style.animation = null; //右边动画
      this.$refs.lBar.style.animation = null; //左边动画
      this.current = 0;
      this.value = 0;
      clearTimeout(this.settimeleft);
      clearInterval(this.playInterval);
    },
    //切换循环状态
    changePlayMode() {
      this.playmode = !this.playmode;
    },
    //切换播放状态
    changePlayState() {
      this.iconplay = !this.iconplay;
      let audio = this.$refs.audio;
      if (this.iconplay) {
        audio.pause();
      } else {
        audio.play();
      }
    },
    //歌曲加载完成
    loadeddataFun() {
      this.duration = this.$refs.audio.duration;
      this.reset();
      this.restart();
    },
    //重新开始播放
    restart() {
      if (!this.firstflag) {
        this.firstflag = true;
      } else {
        this.$refs.audio.play();
      }
    },
    // 控制播放进度条
    sliderchange() {
      let audio = this.$refs.audio;
      // 清空圆形进度条动画
      this.$refs.lBar.style.animation = null;
      this.$refs.rBar.style.animation = null;
      //清空左半圆动画定时器
      clearTimeout(this.settimeleft);
      //如果样式表顶部有之前新设置的动画则删除防止重复添加
      if (document.styleSheets[0].cssRules[0].name == "new") {
        document.styleSheets[0].deleteRule(0);
      }
      // 当歌曲时间小于一半时设置右半圆动画
      if (this.value > 50) {
        document.styleSheets[0].insertRule(
          "@keyframes new {" +
            "0% {" +
            "transform: rotate(" +
            this.value * 3.6 +
            "deg);" +
            "}" +
            "100% {" +
            "transform: rotate(360deg);" +
            "}" +
            "}"
        );
      } else {
        // 当歌曲时间大于一半时设置左半圆动画
        document.styleSheets[0].insertRule(
          "@keyframes new {" +
            "0% {" +
            "transform: rotate(" +
            (this.value * 3.6 + 180) +
            "deg);" +
            "}" +
            "100% {" +
            "transform: rotate(360deg);" +
            "}" +
            "}"
        );
      }
      // 进度条当前时间更新
      audio.currentTime = (audio.duration * this.value) / 100;
      // 如果歌曲时间大于一半时
      if (this.value > 50) {
        setTimeout(() => {
          //设置左半圆动画
          this.$refs.lBar.style.animation = `new ${
            this.duration - audio.currentTime - 1
          }s linear forwards`;
          //如果此时歌曲是暂停播放则暂停动画
          if (this.iconplay == true) {
            this.$refs.lBar.style.animationPlayState = "paused";
          }
        }, 0);
        //让右半圆处于完成状态
        this.$refs.rBar.style.animation = `progressBar 0.1s linear forwards`;
      } else {
        //当歌曲之间小于一半时
        //设置右半圆动画
        this.$refs.rBar.style.animation = `new ${
          this.duration / 2 - audio.currentTime
        }s linear forwards`;
        //如果此时歌曲是暂停播放则暂停动画
        if (this.iconplay == true) {
          this.$refs.rBar.style.animationPlayState = "paused";
        }
        //更新定时器
        this.settimeleft = setTimeout(() => {
          //设置左半圆动画
          this.$refs.lBar.style.animation = `progressBar ${
            this.duration / 2
          }s linear forwards`;
        }, (this.duration / 2 - audio.currentTime) * 1000);
      }
    },
    // 隐藏播放主页面
    hideMainPlay() {
      this.$emit("hide-main-playson");
      this.$emit("move");
    },
    // 显示播放主页面
    showMainPlay() {
      this.$emit("show-main-playson");
      this.$emit("ban");
    },
    //处理歌词
    dealWithLyric(data) {
      //以换行符分隔
      let lyric = data.lyric.split("\n");
      //遍历分隔后的数组将其分成歌词和时间作为对象塞进歌词数组
      for (let i = 0; i < lyric.length - 1; i++) {
        let obj = {};
        lyric[i] = lyric[i].split("]");
        obj.text = lyric[i].pop();
        obj.time = lyric[i][0].substr(1).split(":");
        obj.time = obj.time[0] * 60 + Math.ceil(obj.time[1]);
        this.lyric.push(obj);
      }
    },
    // 处理歌词初始高度
    dealWhithLyricheight() {
      this.heighHalf = document.body.offsetHeight / 2.9;
    },
  },
  components: {
    musicList,
    commentPage,
  },
  filters: {
    musicEndTime(v) {
      var m = parseInt(v / 60);
      var s = parseInt(v % 60);
      if (m == 0 && s == 0) {
        return "0:00";
      } else {
        return m + ":" + (s < 10 ? "0" + s : s);
      }
    },
    commentshow(v) {
      return (v =
        parseInt(v) < 1000
          ? v
          : parseInt(v) < 10000
          ? "999+"
          : parseInt(v) < 100000
          ? "1w+"
          : "10w+");
    },
  },
  watch: {
    prop: {
      handler(newV, oldV) {
        if (this.like) {
          addMyLike({ id: oldV.id });
        }
        if (this.mylikelist.includes(newV.id)) {
          this.like = true;
        } else {
          this.like = false;
        }
        this.reset();
        this.iconplay = false;
        getSongUrl({ id: newV.id }).then((data) => {
          this.musicSrc = data.data[0].url;
        });
        //获取歌词
        getLyric({ id: newV.id }).then((data) => {
          this.lyric = [];
          this.dealWithLyric(data.lrc);
        });
        //获取评论数
        getSongComment({ id: newV.id }).then((data) => {
          this.commentsum = data.total;
        });
      },
      deep: true,
    },
    current() {
      for (let i = 0; i < this.lyric.length; i++) {
        if (parseInt(this.current) == this.lyric[i].time - 1) {
          this.heighLight = i;
          this.heighlightPosition = this.heighHalf - i * 38 + "px";
          return;
        }
      }
    },
  },
  created() {
    this.dealWhithLyricheight();
    getSongComment({ id: this.prop.id }).then((data) => {
      this.commentsum = data.total;
    });
  },
};
</script>

<style lang="less">
footer {
  z-index: 200;
  background-color: transparent;
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  bottom: 0px;
  height: 124px;
  box-sizing: border-box;
  width: 100%;
  transition: all 0.3s linear;
  &.pl-show {
    bottom: -47px !important;
    .footerList {
      margin-bottom: -47px !important;
    }
  }
  &.search-show {
    bottom: -47px !important;
    .footerList {
      margin-bottom: -47px !important;
    }
  }
  .play {
    height: 38px;
    line-height: 38px;
    display: flex;
    padding: 0 18px;
    align-items: center;
    .cd {
      box-sizing: border-box;
      margin-top: -3px;
      width: 41px;
      height: 41px;
      background-repeat: no-repeat;
      background-image: url(../assets/imgs/cd1.png);
      border-radius: 50%;
      position: relative;
      &.play {
        animation: rotate 20s linear infinite;
      }
      &.pause {
        animation-play-state: paused;
      }
      .imgbox {
        border-radius: 50%;
        overflow: hidden;
        height: 27px;
        width: 27px;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        img {
          width: 100%;
        }
      }
    }
    .songsDetail {
      flex: 1;
      margin-left: 11px;
      font-size: 10px;
      color: rgba(255, 255, 255, 0.274);
      font-weight: lighter;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      .song-name {
        font-size: 14px;
        color: #fefefe;
        font-weight: normal;
      }
    }
    .control {
      margin-right: 24px;
      box-sizing: border-box;
      flex: 0 0 28px;
      display: inline-block;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      position: relative;
      color: #fefefe;
      border: 1px solid rgba(255, 255, 255, 0.267);
      div {
        position: absolute;
        width: 14px;
        height: 28px;
        box-sizing: border-box;
        &.left-control {
          overflow: hidden;
          top: -1px;
          left: -1px;
        }
        &.right-control {
          overflow: hidden;
          right: 0;
          top: -1px;
          right: -1px;
        }

        &.left {
          left: 0;
          top: 0px;
          overflow: hidden;
          transform-origin: 14px 14px;
          transform: rotate(180deg);
          &.pause {
            animation-play-state: paused;
          }
          .leftarc {
            width: 28px;
            border: 1px solid #efefef;
            border-radius: 50%;
            top: 0;
            left: 0;
          }
        }
        &.right {
          top: 0px;
          right: 0px;
          overflow: hidden;
          transform-origin: 0px 14px;
          transform: rotate(180deg);
          &.pause {
            animation-play-state: paused;
          }
          .rightarc {
            width: 28px;
            border: 1px solid #efefef;
            border-radius: 50%;
            top: 0;
            right: 0;
          }
        }
      }
      i {
        width: 10px;
        height: 10px;
        line-height: 10px;
        font-size: 10px;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        &.icon-24gf-pause2 {
          left: -1px;
        }
      }
    }
    .play-lists {
      flex: 0 0 20px;
      color: #fefefe;
      i {
        font-size: 20px;
      }
    }
  }
  .footerList {
    transition: all 0.3s linear;
    margin-bottom: 24px;
    padding: 11px 26px 11px 24px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    div {
      transition: background-color 0.1s linear;
      width: 30px;
      height: 43px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      &:nth-child(4) {
        align-items: normal;
      }
      &.con {
        &:nth-child(4) {
          align-items: center;
        }
        p {
          color: #a7a0a1;
        }
        i {
          color: #fbfbfb !important;
          width: 14px !important;
          height: 14px !important;
          font-size: 14px !important;
        }
        .bg {
          background-color: #ccc;
        }
      }
      .bg {
        position: relative;
        border-radius: 50%;
        width: 27px;
        height: 27px;
        background-size: 0%;
        i {
          position: absolute;
          margin: auto;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          font-size: 18px;
          width: 18px;
          height: 18px;
          color: #a7a0a1;
        }
      }

      p {
        font-weight: lighter;
        font-size: 10px;
        color: #fbfbfb;
      }
    }
  }
}
.big-play {
  position: fixed;
  top: 100vh;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 300;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
  &.show {
    top: 0;
  }
  .bg {
    // background: url("https://p1.music.126.net/ZNb0Y5nqRiqTbLUmfAO7uw==/109951165611129674.jpg");
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    opacity: 1;
    transform: scale(1.5);
    transform-origin: center center;
    filter: blur(30px);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: multiply;
  }
}
.playbox {
  margin-top: 52px;
  height: calc(100% - 52px);
  z-index: 400;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .header {
    display: flex;
    height: 31px;
    line-height: 31px;
    color: white;
    margin: 0 21px;
    text-align: center;
    letter-spacing: 1px;
    .left,
    .right {
      flex: 0 0 21px;
      font-size: 21px;
    }
    .center {
      flex: 1;
      line-height: 1.1;
      h4 {
        font-size: 15px;
        font-weight: normal;
      }
      .content {
        font-weight: lighter;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        div {
          background-color: rgba(175, 175, 175, 0.6);
          width: 13px;
          height: 10px;
          position: relative;
          margin-left: 2px;
          border-radius: 100px;

          i {
            width: 5px;
            height: 5px;
            font-size: 5px;
            position: absolute;
            top: 0;
            right: 3px;
            bottom: 0;
            left: 0;
            margin: auto;
            line-height: 5px;
            transform: scale(0.4);
          }
        }
      }
    }
  }
}
.lyric {
  user-select: none;
  z-index: 100;
  height: 60%;
  transition: all 0.3s linear;
  text-align: center;
  font-size: 14px;
  width: 70%;
  overflow: hidden;
  position: absolute;
  font-weight: normal;
  background: linear-gradient(
    to top,
    transparent 1%,
    rgba(255, 255, 255, 0.5),
    15%,
    rgba(255, 255, 255, 0.5),
    85%,
    transparent 99%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 1px;
  top: 0;
  left: 0;
  bottom: 7%;
  right: 0;
  margin: auto;
  &.hide {
    z-index: 0;
    opacity: 0;
  }
  .lyricbox {
    transition: all 0.5s ease-in-out;
    li {
      padding-bottom: 19px;
      &.highlight {
        color: white;
      }
    }
  }
}
.bigCd {
  box-sizing: border-box;
  transition: all 0.3s linear;
  text-align: center;
  height: 65%;
  width: 100%;
  position: relative;
  &.hide {
    opacity: 0;
  }
  div {
    box-sizing: border-box;
  }
  .cdbox {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 311px;
    height: 311px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    &.play {
      animation: rotate 20s linear infinite;
    }
    &.pause {
      animation-play-state: paused;
    }
    .cdbg {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      margin: auto;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      transform: scale(0.9);
      border: 2px solid black;
      img {
        width: 100%;
      }
      .imgbox {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        transform: scale(0.7);
        border: 1px solid black;
      }
    }
  }
}
.interactive {
  transition: all 0.3s linear;
  box-sizing: border-box;
  padding: 0 48px 0 48px;
  display: flex;
  width: 100%;
  color: white;
  justify-content: space-between;
  align-items: center;
  &.hide {
    opacity: 0;
  }
  .eleiconbox {
    text-align: center;
    width: 25px;
    height: 25px;
    line-height: 25px;
    box-sizing: border-box;
    position: relative;
    .icon-aixin1 {
      color: #fb463f;
    }
    i {
      font-size: 22px;
    }
    &:nth-child(2) {
      .vip {
        transform: scale(0.7);
        bottom: 2px;
        right: -6px;
        position: absolute;
        width: 18px;
        height: 11px;
        background-color: #efefef;
        border-radius: 100px;
        i {
          margin: auto;
          font-size: 12px;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          line-height: 11px;
          color: #666;
        }
      }
    }
    &:nth-child(3) {
      position: relative;
      .comment {
        letter-spacing: 1px;
        position: absolute;
        top: -1px;
        font-size: 12px;
        width: 12px;
        height: 12px;
        line-height: 12px;
        left: 16px;
        transform: scale(0.9);
      }
      div {
        &.first {
          width: 12.5px;
          overflow: hidden;
        }
        &.second {
          height: 12.5px;
          overflow: hidden;
          width: 12.5px;
          bottom: 0;
          left: 12.5px;
          i {
            position: absolute;
            top: -12.5px;
            left: -12.5px;
          }
        }
        position: absolute;
      }
      align-self: flex-end;
      transform: scale(0.9);
      bottom: -0.5px;
    }
    &:nth-child(4) {
      bottom: 1px;
    }
  }
}
.slide {
  display: flex;
  align-items: center;
  padding: 0 21px;
  margin-top: 42px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  .current-time {
    margin-right: 9px;
    transform: scale(0.9);
  }
  .end-time {
    margin-left: 9px;
    transform: scale(0.9);
  }
  .custom-button {
    height: 8px;
    width: 8px;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color: white;
    border-radius: 100px;
  }
}
.controlbox {
  margin-bottom: 30px;
  height: 58px;
  line-height: 58px;
  margin-top: 20px;
  box-sizing: border-box;
  padding: 0 52px 0 42px;
  display: flex;
  width: 100%;
  color: white;
  justify-content: space-between;
  align-items: center;
  .eleiconbox {
    text-align: center;
    width: 25px;
    height: 25px;
    line-height: 25px;
    box-sizing: border-box;
    position: relative;
    .one {
      user-select: none;
      position: absolute;
      margin: auto;
      top: -5px;
      bottom: 0;
      left: -1px;
      right: 0;
      font-size: 12px;
      width: 12px;
      height: 12px;
      transform: scale(0.7);
    }
    &:nth-child(3) {
      border: 1px solid white;
      width: 58px;
      height: 58px;
      line-height: 58px;
      border-radius: 50%;
      position: relative;
      i {
        position: absolute;
        top: 1px;
        bottom: 0;
        right: -3px;
        left: 0;
        margin: auto;
        width: 25px;
        height: 25px;
        line-height: 25px;
      }
    }
    i {
      font-size: 25px;
    }
  }
}
// cd旋转
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
// 圆形进度条动画
@keyframes progressBar {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
//点击我喜欢
@keyframes like {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
</style>